.mask {
  @apply fixed left-0 top-0 right-0 bottom-0 bg-black-60 flex items-center justify-center;
  z-index: var(--modal-index);
  background: rgba(20, 20, 20, 0.4);

  .menu {
    @apply flex h-screen top-0 flex flex-col px-5 overflow-y-auto;
    position: absolute;
    width: 15rem;
    background: #141414;
    padding-bottom: 3.88rem;
    animation: fadein 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) both;
    .top {
      @apply pt-4;
      .userInfo {
        @apply flex items-center relative w-full;
        height: 3.75rem;

        .vipImg {
          @apply relative shrink-0 h-10 w-10;
          border-radius: 50%;
          margin-right: 0.625rem;
          background-image: url('/images/user.png');
          background-size: 100% 100%;

          &.noLogin {
            background-image: url('/images/defaultHead.png');
          }
        }

        .vipDate {
          width: calc(100% - 2.5rem);

          & > p {
            @apply text-left;
          }

          .email {
            @apply text-base font-semibold w-full leading-4;
            font-family: Alibaba PuHuiTi 2;

            &.isVip {
              font-variation-settings: 'opsz' auto;
              background: linear-gradient(90deg, #ffbd8d 0%, #ffe5d8 100%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              background-clip: text;
              text-fill-color: transparent;
            }

            &.notVip {
              @apply text-white;
            }

            &.emailLogin {
              font-variation-settings: 'opsz' auto;
              background: linear-gradient(90deg, #ffb521 0%, #ff651d 100%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              background-clip: text;
              text-fill-color: transparent;
            }
          }

          .pDate {
            @apply text-xs leading-3 text-white-60 leading-3 mt-2;
            font-family: Alibaba PuHuiTi 2;
          }
        }
      }

      .openVip {
        @apply rounded-sm text-sm leading-3 font-semibold;
        width: 12.5rem;
        height: 2.4375rem;
        background: linear-gradient(90deg, #ffbd8d 0%, #ffe5d8 100%);
        margin-top: 0.625rem;
        color: #7c3c19;

        &.notLogin {
          @apply text-white;
          background: linear-gradient(90deg, #ffb521 0%, #ff651d 100%);
        }
      }
    }

    .middle {
      @apply w-full relative pb-10;
      margin: 0.625rem 0;

      &::after {
        @apply absolute left-0 w-full bottom-0;
        content: '';
        height: 0.0625rem;
        background: rgba(255, 255, 255, 0.2);
      }

      .navItem {
        @apply w-full flex items-center justify-start;
        height: 2.75rem;
        &.navItemActive {
          .label {
            @apply text-theme;
          }
        }
        .icon {
          @apply w-5 h-5;
          margin-right: 0.625rem;
        }

        .label {
          @apply text-white-80 text-base;
          font-family: Alibaba PuHuiTi 2;
        }

        .cornerMark {
          @apply inline-block text-sm leading-3 text-white;
          font-family: Alibaba PuHuiTi 2;
          padding: 0.375rem 0.5rem;
          background: linear-gradient(90deg, #fe5666 4%, #fe7dd3 96%);
          border-radius: 0.75rem;
          border-bottom-left-radius: 0;
          margin-left: 0.625rem;
          transform: scale(0.9);
        }
      }
    }

    .bottom {
      @apply w-full text-center text-white-60 text-base;
      height: 2.75rem;
      line-height: 2.75rem;
    }
  }
}

@keyframes fadein {
  0% {
    right: -15rem;
  }

  100% {
    right: 0;
  }
}
